@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&family=DM+Serif+Text&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&family=DM+Serif+Text&family=Delius&family=Mea+Culpa&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=WindSong:wght@400;500&display=swap');

* {
box-sizing: border-box; 
}

body {
    margin: 0; 
    padding: 0; 
    width: 100%; 
    font-family: "Poppins", sans-serif; 
}


/**************** NAV **************/

/* Barre de navigation */
nav {
    display: flex; 
    background-color: rgb(73, 57, 44); 
    color: rgb(245, 241, 238); 
    width: 100%;
    height: 150px;
    padding: 0 40px; 
    align-items: center; 
    justify-content: space-between; 
}
 /* Liste des liens de navigation */
nav ul {
    display: flex;
    align-items: center;
}

/* Liens de navigation individuels */
nav li {
    list-style: none; 
    padding: 30px; 
}

/* Style des liens de navigation */
nav a {
    font-size: 20px;
    color: rgb(245, 241, 238);
    text-decoration: none; 
    text-transform: uppercase; 
}

/* Effet de couleur au survol des liens de navigation */
nav a:hover {
    color: #d4a373; 
}

/* Logo du salon de coiffure/barbier */
#bloom {
    font-family: "Ballet", cursive; 
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 55px;
}

/* Bouton menu burger mobile (caché sur ordi) */
#nav-toggle {
    display: none;
    background-color: transparent;
    padding: 10px;
    border: none;
    cursor: pointer;
}

/* Les 3 barres du menu burger */
.barre {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background: rgb(245, 241, 238);
    transition: all 0.3s ease-in-out; 
}

/* Icône de connexion */
#icone-connexion {
    color: rgb(245, 241, 238);
    text-decoration: none;
    transition: all 0.3s ease;

    margin: auto;
    padding: 0 15px;

    border: 1px solid #8d6e63; 
    border-radius: 20px; 
}

/* Petit effet au survol pour l'icône de connexion */
#icone-connexion:hover {
    background-color: rgba(212,163,115, 0.1); 
    transform: scale(1.1); 
}

/* Effet de rétrécissement quand on click dessus */
#icone-connexion:active {
    transform: scale(0.9); 
    color: rgb(73, 57, 44);
}







/* --- ÉTOILE RÉDUCTION (NEWSLETTER) --- */

/* Etoile pour accès à le Newsletter */
#star-conteneur {
    color: rgb(212, 178, 115); 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

/* Petit effet au survol pour L'étoile */
#star-conteneur:hover {
    background-color: rgba(212, 178, 115, 0.1);
}

/* Animation de l'étoile qui tourne et brille */
.etoile-anime {
    /* Paramètres de l'animation : nom, durée totale (tour + pause), type, boucle */
    animation: rotateAndGlow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes rotateAndGlow {
    0% { 
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0px rgba(212,163,115, 0));
    }
    /* L'étoile tourne et commence à briller */
    40% {
        transform: rotate(180deg) scale(1.2); /* Petit zoom pour l'effet d'insistance */
        filter: drop-shadow(0 0 8px rgba(212,163,115, 0.8));
    }
    /* Fin de la rotation à 70% (donc pause de 70% à 100%) */
    70% { 
        transform: rotate(360deg) scale(1);
        filter: drop-shadow(0 0 12px rgba(212,163,115, 0.9));
    }
    /* La lueur diminue pendant la pause pour un effet de "respiration" */
    100% { 
        transform: rotate(360deg) scale(1);
        filter: drop-shadow(0 0 2px rgba(212,163,115, 0.3));
    }
}


/* --- POP-UP NEWSLETTER --- */

/* Affichage de la pop-up Newsletter (caché par défaut) */
#newsletterjs {
    display: none; 
    position: fixed; 
    z-index: 3000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(73, 57, 44, 0.7);
    backdrop-filter: blur(5px); /* Floute l'arrière-plan */
    animation: fadeInNews 0.4s ease;
    
}

/* Animation d'apparition de la pop-up Newsletter (fade-in) */
@keyframes fadeInNews {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Contenu de la pop-up Newsletter */
#contenu-newsletter {
    background-color: rgb(245, 241, 238); 
    margin: 15% auto; 
    padding: 30px;
    border-radius: 20px;
    width: 85%;
    max-width: 450px;
    position: relative;
    box-shadow: 0 15px 50px rgba(73, 57, 44,0.3);
    border: 1px solid rgb(199, 183, 168);
    text-align: center;
}

/* Cadeau de bienvenue */
#newsletter-texte h2 {
    color: rgb(73, 57, 44);
    font-size: 50px;
    margin-bottom: 10px;
}

/* Inscrivez-vous et recevez-10% sur votre prochaine prestation. */
#newsletter-texte p {
    font-size: 14px;
    color: rgb(73, 57, 44);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* L'icône cadeau */
.cadeau-icone {
    font-size: 40px;
    color: rgb(212,163,115);
    margin-bottom: 15px;
}

/* Champ Email */
#newsletter-email input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgb(199, 183, 168);
    border-radius: 10px;
    outline: none;
    color: rgb(73, 57, 44);
    font-size: 14px;
    background-color: rgb(245, 241, 238);
    margin-bottom: 15px;
}

/* Champ Email contour boite change de couleur */
#newsletter-email input:focus {
    border-color: rgb(212,163,115);
    box-shadow: 0 0 8px rgba(73, 57, 44, 0.2);
}

/* Bouton d'envoi de la newsletter */
#btn-newsletter {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, rgb(199, 183, 168), rgb(212,163,115)); 
    color: rgb(245, 241, 238);
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(73, 57, 44, 0.3);
}

/* Bouton fermer la newsletter */
#ferme-newsletter {
    position: absolute;
    right: 20px;
    top: 15px;
    color: rgb(73, 57, 44);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/* Bouton fermer la newsletter avec effet de couleur*/
#ferme-newsletter:hover {
    color: rgb(212,163,115);
}

/**************** NAV FIN **************/







/**************** HEADER **************/

/* Header image Femme */
#headerfemme {
    width: 100%;
    height: 85vh;
    background-image: 
        linear-gradient(rgba(73, 57, 44, 0.2), rgba(73, 57, 44, 0.6)), 
        url("Images/Accueil/Photo-header-beige.jpg");
    background-size: cover; 
    background-position: center;
    padding-right: 10%;
}

/* Header image Homme */
#headerhomme {
    width: 100%;
    height: 85vh;
    background-image: 
        linear-gradient(rgba(73, 57, 44, 0.2), rgba(73, 57, 44, 0.6)), 
        url("Images/Accueil/Photo-header-homme.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    padding-left: 10%;
}

/* Header texte Femme */
#headertextef {
    padding-top:13%;
    color: rgb(245, 241, 238);
    text-align: right;                            
}

/* Header texte Homme */
#headertexteh {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    color: rgb(245, 241, 238);
    max-width: 700px;
    text-align: left;                            
}

/* Texte : Coiffeur/Barbier */
.headertexte h1 {
    margin: 0 0 10% 0;
    /*margin-bottom: 10%;*/
    font-family: "Mea Culpa", cursive;
    font-weight: 500;
    font-size: 9rem; 
    line-height: 1.1; 
    
}

/* Texte : transfo look, transfo avec BLOOM ou Art Sublimez */
.headertexte p {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* Effet sur mot "Bloom" du header : animation de pulsation de couleur */
@keyframes bloomPulse {
    0% { color: rgb(245, 241, 238); }
    50% { color: #d4a373; } 
    100% { color: rgb(245, 241, 238); }
}

.headertexte strong {
    animation: bloomPulse 3s infinite;
    display: inline-block;
}


/* --- BOUTON RDV --- */

/*  Base  pour toutes les pages*/
.btn-rdv {
    display: block;

    width: fit-content; /* Force la largeur adaptée au texte */
    min-width: 220px; 
    padding: 12px 30px;

    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;

    color: rgb(245, 241, 238);
    background: linear-gradient(135deg, rgb(199, 183, 168) 0%, rgb(185, 148, 110) 50%, rgb(73, 57, 44) 100%) !important; /* Force le dégradé */
    border-radius: 2em;
    box-shadow: 0 8px 20px rgba(73,57,44,0.5);

    overflow: hidden;
    cursor: pointer;
    transition: 0.35s ease;
}

/* Effet de reflet qui passe sur le bouton au survol */
.btn-rdv::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -120%;
    width: 60%;
    height: 140%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(245, 241, 238,0.35),
        transparent
    );
    transform: rotate(12deg);
    transition: left 0.8s ease;
}

.btn-rdv:hover {
    transform: translateY(-4px) scale(1.05);
    letter-spacing: 2px;
    box-shadow:
        0 15px 30px rgba(73,57,44,0.3),
        0 0 20px rgba(212,163,115,0.2);
}

.btn-rdv:hover::before {
    left: 140%; 
}

#btn-rdv-Coiffeur-accueil{
    float: right;
    text-align: end;
    margin-top: 3em;
}

#btn-rdv-Homme {
    margin-top: 2em;
}

/* Bouton RDV sur image de fin de page */
#btn-rdv-Transformation, #btn-rdv-RDV {
    margin-inline: auto;
    margin-top: 600px;
    font-size: 50px;
    letter-spacing: 5px;
}

#btn-rdv-Barbier, #btn-rdv-Coiffeur {
    margin-inline: auto;
    margin-top: 5em;
}

/**************** HEADER FIN **************/







/**************** PRESENTATION **************/

/*Présentation du salon de coiffure et barbier*/
.presentation {
    padding: 250px 200px;
    background-color: rgb(73, 57, 44);
    color: rgb(245, 241, 238);
}

/* TITRE : Présentation */
.presentation h1 {
    font-family: "Mea Culpa", cursive;
    font-weight: 100;
    text-align: center;
    font-size: 5rem;
    margin: 20px 0;
}

/* Bloc image + texte */
.presentationimgtexte {
    display: flex;
    align-items: center; 
    gap: 50px; 
    margin-top: 200px;
}

/* Image du salon de coiffure/barbier */
.presentation img {
    width: 25%;
    border-radius: 15px; 
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Texte de présentation du salon de coiffure/barbier */
.textepresentation {
    flex: 1; 
}

/* TITRE Salon de coiffure/barbier à VILLE – Bloom */
.presentation h3 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    line-height: 1.3;
    color: #d4a373; 
}

/* Texte de présentation du salon de coiffure/barbier */
.presentation p {
    font-size: 1.1rem; 
    line-height: 1.8; 
    margin-bottom: 20px;
    font-weight: 300;
}

/**************** PRESENTATION FIN **************/





/**************** PRESTATION **************/

/* Section présentant les différentes prestations du salon de coiffure et barbier (coupe, coloration, soin, etc.) avec des images et une courte description pour chacune.*/
#hprestations {
    padding: 100px 40px;
    text-align: center;
    color: rgb(73, 57, 44);
    background: rgb(245, 241, 238); 
}

/* TITRE : Nos prestations */
#hprestations h2 {
    font-family: "Mea Culpa", cursive;
    font-weight: 100;
    text-align: center;
    font-size: 5rem;
    margin: 20px 0;
}

/* Conteneur des cartes de prestations */
#hprestations-conteneur {
    cursor: pointer;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;  
}

/* Carte de prestation individuelle */
.hprestation {
    width: 300px;
    border-radius: 20px;
    overflow: hidden;
    background: rgb(245, 241, 238);
    box-shadow: 0 10px 30px rgba(73, 57, 44, 0.3);
    transition: all 0.4s ease;
    position: relative;
}

/* Image de la prestation (ex : coupe, coloration, soin, etc.) */
.hprestation img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Contenu de la carte de prestation (titre + description) */
.hprestation-content {
    padding: 25px;
}

/* Titre de la prestation (ex : Coupe Homme, Coloration, etc.) */
.hprestation h3 {
    margin-bottom: 10px;
    font-size: 20px;
}

/* Description de la prestation */
.hprestation p {
    font-size: 15px;
    opacity: 0.8;
    line-height: 1.6;
}

/* Effet au survol de la carte de prestation : léger soulèvement et zoom sur l'image */
.hprestation:hover {
    transform: translateY(-10px); 
    box-shadow: 0 20px 50px rgba(73, 57, 44, 0.25);
}

/* Zoom léger sur l'image au survol de la carte de prestation */
.hprestation:hover img {
    transform: scale(1.08);
}

/* Effet de surbrillance avec un dégradé qui apparaît au survol de la carte de prestation */
.hprestation::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(199, 183, 168, 0.2), transparent );
    opacity: 0;
    transition: 0.6s;
}

/* Affiche le dégradé de surbrillance au survol de la carte de prestation */
.hprestation:hover::after {
    opacity: 1;
}

/**************** PRESTATION FIN **************/




/**************** TRANSITION **************/

/* Image de transition entre prestations et transformations */
#imgtransi {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
    display: block;
    background-color: rgb(245, 241, 238);
}

/* Ligne de séparation décorative transition */
.ligne {
    width: 60%;
    margin: 80px auto;

    background: rgb(73, 57, 44);

    border: none;
    height: 2.5px;
    background-image: linear-gradient(rgb(199, 183, 168) , rgb(73, 57, 44), rgb(199, 183, 168));
    opacity: 0.6;
}

/* Ligne de séparation décorative présentation*/
.ligneblanche {
    width: 100%;
    height: 1px;
    margin: auto;
    padding: 1.5px;
    margin-bottom: 10px;
    margin-top: 10px;
    border: none;
    background-image: linear-gradient(rgb(245, 241, 238) , rgb(185, 148, 110), rgb(245, 241, 238));
    opacity: 0.6;
}

/**************** TRANSITION FIN **************/








/**************** AVANT / APRÈS (EFFET GLISSIÈRE) **************/

/* Section présentant des photos avant/après de transformations réalisées par le salon de coiffure et barbier, avec un effet de glissière pour comparer les résultats. */
#avant-apres-section {
    padding: 80px 40px; 
    text-align: center; 
    background-color: rgb(245, 241, 238);
}

/* TITRE : Avant / Après */
#avant-apres-section h2 {
    font-family: "Mea Culpa", cursive;
    font-weight: 100; 
    text-align: center;
    font-size: 5rem; 
    margin: 20px 0;
}

/* Conteneur des 3 blocs de photos avant/après */
#avant-apres-contenu {
    display: flex; 
    justify-content: center; 
    gap: 40px; 
    flex-wrap: wrap; 
}

/* Bloc individuel de photo avant/après avec effet de glissière */
.avant-apres {
    position: relative; 
    width: 350px; 
    height: 450px; 
    overflow: hidden; 
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(73, 57, 44, 0.1); 
}

/* Image "Avant" (positionnée en dessous) */
.img-avant {
    width: 100%;
    height: 100%;
    display: block;   
    object-fit: cover; 
}

/* Conteneur de l'image "Après" (positionné au-dessus) */
.img-apres { 
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

/* Image "Après" (positionnée à l'intérieur du conteneur .img-apres) */
.img-apres img {
    width:350px;
    height:100%;
    object-fit:cover;
}

/* Curseur de glissière (barre verticale) */
.curseur {
    position: absolute;
    top: 0; 
    left: 50%; 
    width: 3px;
    height: 100%;
    background-color: rgb(245, 241, 238);
    cursor: ew-resize; 
    z-index: 10;
}

/* Ajout d'un symbole à l'intérieur du curseur pour le rendre plus visible et esthétique */
.curseur::after {
    content: "✦"; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    width: 38px;
    height: 38px;
    border-radius: 50%; 
    background: rgb(245, 241, 238);
    color: rgb(73, 57, 44);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 5px 15px rgba(73, 57, 44,0.15);
}

/**************** AVANT APRES FIN **************/






/**************** AVIS **************/

/* Section présentant des avis clients avec des étoiles de notation, des commentaires et éventuellement des photos des clients satisfaits. */
#avis-section {
    padding:80px 40px;
    background-color: rgb(73, 57, 44);
    text-align:center;
}

/* TITRE : Avis clients */
#avis-section h2 {
    color: rgb(245, 241, 238);
    font-family: "Mea Culpa", cursive;
    font-weight: 100;
    text-align: center;
    font-size: 5rem;
    margin: 20px 0;
}

/* Conteneur des avis clients */
#avis-conteneur {
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

/* Carte d'avis client individuelle */
.avis {
    background-color: rgb(245, 241, 238);
    color: rgb(73, 57, 44);
    padding:30px;
    width:300px;
    border-radius:10px;
    box-shadow:0 5px 20px rgba(245, 241, 238,0.15);
    transition:0.3s;
}

/* Effet de soulèvement au survol de la carte d'avis client */
.avis:hover {
    transform:translateY(-5px);
}

/* Commentaire de l'avis client */
.texte {
    font-style:italic;
    margin-bottom:20px;
}

/* Conteneur du nom du client et des étoiles de notation */
.client {
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Nom du client */
.nom {
    font-weight:bold;
    margin-bottom:5px;
}

/* Étoiles de notation de l'avis client */
.etoiles {
    color:#dfa300;
    font-size:1.2rem;
}


/**************** AVIS FIN **************/




/**************** FAQ **************/

/* Section présentant une foire aux questions (FAQ) pour répondre aux interrogations courantes des clients */
#faq {
    padding: 100px 40px;
    max-width: 900px;
    margin: auto;
    color: rgb(245, 241, 238);
}

/* TITRE : FAQ */
#faq h2 {
    font-family: "Mea Culpa", cursive;
    font-weight: 100;
    text-align: center;
    font-size: 5rem;
    margin: 20px 0;
}

/* Conteneur des questions/réponses de la FAQ */
.faq-boite {
    background: rgb(73, 57, 44); 
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 25px;

    box-shadow: 0 10px 30px rgba(73,57,44,0.08);

    cursor: pointer;
    transition: all 0.4s ease;

    position: relative;
}

/* Effet de soulèvement au survol de la boîte de question/réponse de la FAQ */
.faq-boite:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(73,57,44,0.15);
}

/* Conteneur de la question de la FAQ (texte + icône) */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}

/* Titre de la question de la FAQ */
.faq-titre {
    font-weight: 500;
    font-size: 17px;
}

/* Icône de la question de la FAQ "✦" */
.icone {
    font-size: 20px;
    color: rgb(199, 183, 168);
    transition: all 0.4s ease;
}

/* Rotation de l'icône de la question de la FAQ quand la boîte est active (ouverte) */
.faq-boite.active .icone {
    transform: rotate(45deg);
    color: rgb(245, 241, 238);
}

/* Conteneur de la réponse de la FAQ (caché par défaut) */
.faq-reponse {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    max-height: 0; 
    overflow: hidden;       
    transition: 
        transform 0.6s ease, 
        opacity 0.3s ease,
        max-height 0.6s ease;
    color: rgb(245, 241, 238);
    line-height: 1.6;
    font-size: 15px;
    position: relative;
    z-index: 2;
}

/* Affiche la réponse de la FAQ quand la boîte est active (ouverte) */
.faq-boite.active .faq-reponse {
    transform: scaleY(1);
    opacity: 1;
    max-height: 200px; 
    margin-top: 15px;
}

/* Effet de surbrillance avec un dégradé qui apparaît au survol de la boîte de question/réponse de la FAQ */
.faq-boite::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(199, 183, 168, 0.25),
        transparent
    );
    opacity: 0;
    transition: 0.6s;
    pointer-events: none;
}

/* Affiche le dégradé de surbrillance au survol de la boîte de question/réponse de la FAQ */
.faq-boite:hover::after {
    opacity: 1;
}

/**************** FAQ FIN **************/



/*Image fin de la page*/
#transfoaccueil {
    width: 100%;
    height: 85vh;
    background-image: 
        linear-gradient(rgba(73, 57, 44, 0.2), rgba(73, 57, 44, 0.6)),
        url("Images/Accueil/Transformation-accueil.jpg");
    background-size: cover;
    background-position: center;
}








/**************** FOOTER **************/

/* Section de pied de page */
footer {
    display: flex;
    flex-direction: column;
    background-color: rgb(73, 57, 44);
    font-family: "Poppins", sans-serif;
    width: 100%;
    padding: 40px; 
    box-sizing: border-box;
}

/* Conteneur des 3 blocs d'informations du pied de page (liens, logo, réseaux sociaux) */
#footerinfo {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    flex-wrap: wrap; 
    margin-bottom: 20px;
}

/* Les 3 blocs d'informations du pied de page (liens, logo, réseaux sociaux) partage le même espace (1/3 chacun)*/
#footer-left, #footer-center, #footer-right {
    flex: 1; 
}

/* Bloc de gauche du pied de page (liens) */
#footer-left {
    display: flex;
}

/* Bloc central du pied de page (logo) */
#footer-center {
    display: flex;
    justify-content: center;
}

/* Bloc de droite du pied de page (réseaux sociaux) */
#footer-right {
    display: flex;
    justify-content: flex-end;
}

/* Liste des liens du pied de page */
footer ul {
    display: flex;
    margin: 0;
    padding: 0;
}

/* Chaque lien du pied de page */
footer li {
    list-style: none;
    padding: 25px;
}

/* Style des liens du pied de page */
footer a {
    font-size: 15px;
    color: rgb(245, 241, 238);
    text-decoration: none;
    text-transform: uppercase;
}

/* Effet au survol des liens du pied de page */
footer a:hover {
    color: rgb(199, 183, 168);
    transition: 0.3s;
}

/* Logo du pied de page */
#bloomfooter {
    font-family: "Ballet", cursive;
    color: rgb(245, 241, 238);
    font-size: 40px;
}

/* Conteneur des icônes de réseaux sociaux du pied de page */
#reseausociaux {
    color: rgb(245, 241, 238);
    display: flex;
    gap: 15px;
}

/* Icônes de réseaux sociaux du pied de page */
.fa-brands:hover {
    transform: scale(1.2);
    transition: 0.3s;
}

/* Taille des icônes de réseaux sociaux du pied de page */
#reseausociaux div {
    font-size: 2em;
}

/* Conteneur de la mention légale et du copyright du pied de page */
#footermention {
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* Ligne de séparation décorative du pied de page */
#footerbarre {
    width: 90%;          
    margin: 20px auto;   
    border: none;        
    border-top: 2px solid rgb(245, 241, 238);
    border-radius: 2px;  
}

/* Conteneur du copyright et des mentions légales du pied de page */
#footercopyright {
    text-align: center;
    font-size: 12px;
    color: rgb(245, 241, 238);
}

/* Style des liens de la mention légale et du copyright du pied de page */
#footercopyright a{
    color: rgb(245, 241, 238);
    margin: 0 5px;
    cursor: pointer;
}



/* Mentions Légales et Politique de Confidentialité */

/* Conteneur de la pop-up Mentions Légales et Politique de Confidentialité (caché par défaut) */
#MLPCjs {
    display: none; 
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(74, 63, 53, 0.7); 
    backdrop-filter: blur(4px);
}

/* Contenu de la pop-up Mentions Légales et Politique de Confidentialité */
#MLPC-content {
    background-color: #fdfbf9; 
    margin: 5% auto;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto; 
    position: relative;
    box-shadow: 0 10px 40px rgba(73, 57, 44,0.3);
    border: 1px solid rgb(212,163,115);
}

/* Titre de la pop-up Mentions Légales et Politique de Confidentialité */
#MLPC-texte h2 {
    color: rgb(73, 57, 44);
    font-size: 2rem;
    margin-bottom: 10px;
}

/* Sous-titres de la pop-up Mentions Légales et Politique de Confidentialité */
#MLPC-texte h3 {
    color: rgb(212,163,115);
    margin-top: 20px;
    font-size: 1.1rem;
}

/* Texte de la pop-up Mentions Légales et Politique de Confidentialité */
#MLPC-texte p, #MLPC-texte li {
    font-size: 14px;
    color: rgb(73, 57, 44);
    line-height: 1.6;
}

/* Bouton de fermeture de la pop-up Mentions Légales et Politique de Confidentialité */
.ferme {
    position: absolute;
    right: 20px;
    top: 15px;
    color: rgb(212,163,115);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/* Effet de couleur au survol du bouton de fermeture de la pop-up Mentions Légales et Politique de Confidentialité */
.ferme:hover { color: rgb(73, 57, 44); }



/**************** FOOTER FIN **************/


































/**************************************** COIFFEUR *************************************************/

/**************** HEADER COIFFEUR **************/

/* Header image du salon de coiffure */
#coiffeur-header {
    width: 100%;
    height: 85vh;
    background-image:
        linear-gradient(
        rgba(73, 57, 44,0.1),
        rgba(73, 57, 44,0.7)),
        url("Images/Coiffeur/Header coiffeur.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Conteneur du texte et du bouton de prise de rendez-vous du header du salon de coiffure/barbier */
#headertexteC {
    display: block;

    padding-top: 260px;

    text-align: center;
    color: rgb(245, 241, 238);
}

/* Titre : Coiffeur/Barbier */
#headertexteC h1 {
    margin: 0 0 10% 0;

    font-family: "Mea Culpa", cursive;
    font-weight: 100;
    font-size: 10rem;
    text-shadow: 0 2px 10px rgba(73, 57, 44, 0.8);
}

/* Texte : phrase d'accroche du header du salon de coiffure/barbier */
#headertexteC p {
    font-size: 1.5rem;
}

/* Bouton de prise de rendez-vous du header du salon de coiffure/barbier */
#headertexteC > .btn-rdv {
    font-size: 40px;
}

/**************** HEADER COIFFEUR FIN **************/


/**************** EQUIPE COIFFEUR **************/

/* Section présentant l'équipe de coiffeurs et barbiers du salon, avec des photos, des noms et une courte description de chacun. */
#equipe {
    padding:80px 40px;
    text-align:center;
}

/* TITRE : Notre équipe de passionnés (coiffeurs/barbiers) */
#equipe h2 {
    font-family: "Mea Culpa", cursive;
    font-weight: 100;
    text-align: center;
    font-size: 5rem;
    margin: 20px 0;
}

/* Conteneur des cartes de présentation de l'équipe de coiffeurs et barbiers du salon */
#equipe-conteneur {
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

/* Carte de présentation individuelle d'un coiffeur ou barbier du salon */
.carte-coiffeur-barbier {
    position:relative;
    width:250px;
    height:320px;
    overflow:hidden;
    border-radius:10px;
    cursor:pointer;
}

/* Image de la carte de présentation d'un coiffeur ou barbier du salon */
.carte-coiffeur-barbier img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s;
}

/* Conteneur des informations (nom, description) de la carte de présentation d'un coiffeur ou barbier du salon (caché par défaut) */
.info {
    position:absolute;
    bottom:0;
    width:100%;
    background:rgba(73, 57, 44,0.6);
    color:rgb(245, 241, 238);
    padding:15px;
    transform:translateY(100%);
    transition:0.4s;
}

/* Affiche les informations de la carte de présentation d'un coiffeur ou barbier du salon au survol de la carte, et zoom léger sur l'image */
.carte-coiffeur-barbier:hover img {
    transform:scale(1.1);
}

/* Affiche les informations de la carte de présentation d'un coiffeur ou barbier du salon au survol de la carte */
.carte-coiffeur-barbier:hover .info {
    transform:translateY(0);
}

/**************** EQUIPE COIFFEUR FIN**************/



/**************** PRESTATION **************/

/* Section présentant les différentes prestations du salon de coiffure et barbier (coupe, coloration, soin, etc.) avec des images et une courte description pour chacune. */
#prestations-coiffure-barbier {
    padding-top: 100px;
    padding-bottom: 200px;
    background-color: rgb(73, 57, 44); 
}

/* Conteneur des cartes de présentation des prestations */
#prestations-conteneur {
    cursor: pointer;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Carte de présentation individuelle d'une prestation du salon */
.prestation {
    padding: 100px 40px;
    text-align: center;
    color: rgb(73, 57, 44);
    background: #f8f6f3;
}

/* TITRE : Nos prestations de coiffure et barbier */
#prestations-coiffure-barbier h2 {
    font-family: "Mea Culpa", cursive;
    font-weight: 100;
    text-align: center;
    font-size: 5rem;
    padding: 20px 0;
    color: rgb(245, 241, 238);
}

/* Carte de présentation individuelle d'une prestation du salon (ex : coupe, coloration, soin, etc.) */
.prestation {
    width: 300px;
    border-radius: 20px;
    overflow: hidden;
    background: rgb(245, 241, 238);

    box-shadow: 0 10px 30px rgba(73, 57, 44, 0.15);

    transition: all 0.4s ease;
    position: relative;
    
}

/* Image de la prestation du salon (ex : coupe, coloration, soin, etc.) */
.prestation img {
    width: 100%;
    height: 220px;
    object-fit: cover;

    transition: transform 0.6s ease;
    border-radius: 20px;
}

/* Titre de la prestation du salon (ex : Coupe Femme, Coloration, etc.) */
.prestation h3 {
    margin-bottom: 10px;
    font-size: 20px;
}

/* Description de la prestation du salon */
.prestation p {
    font-size: 15px;
    opacity: 0.8;
    line-height: 1.6;
}

/* Effet au survol de la carte de présentation d'une prestation du salon : léger soulèvement et zoom sur l'image */
.prestation:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(73, 57, 44, 0.25);
}

/* Zoom léger sur l'image au survol de la carte de présentation d'une prestation du salon */
.prestation:hover img {
    transform: scale(1.08);
}

/* Effet de surbrillance avec un dégradé qui apparaît au survol de la carte de présentation d'une prestation du salon */
.prestation::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(212,163,115, 0.2),
        transparent
    );
    opacity: 0;
    transition: 0.6s;
}

/* Affiche le dégradé de surbrillance au survol de la carte de présentation d'une prestation du salon */
.prestation:hover::after {
    opacity: 1;
}

/**************** PRESTATION FIN **************/

















/*Questionnaire estimation*/

/* Section présentant un questionnaire d'estimation de prix pour les prestations de coiffure et barbier, permettant aux clients d'obtenir une estimation du coût de leurs services en fonction de leurs choix */
#avatar-configuration {
    padding: 50px 10%; 
    display: flex; 
    gap: 40px; 
    align-items: center; 
    justify-content: center; 
    flex-wrap: wrap;
}

/* Image de fond du questionnaire */
#image-fond-questionnaire {
    width: 100%;
    min-height: 100vh;
    background-image: url("Images/Questionnaire/Questionnaire-fond-blanc-500.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Texte : Estimation à titre indicatif  */
#avatar-configuration p {
    background-color: #f8f6f3;
    border: black solid 1px;
    border-radius: 2rem;
    padding: 10px 20px;
    color: rgb(126, 126, 126);
}

/* Affichage avatar selon les icônes */
#affichage-avatar {
    position: relative; 
    width: 290px; 
    height: 260px; 
    background: rgb(245, 241, 238); 
    border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(73, 57, 44, 0.2); 
    overflow: hidden;
    grid-area: aa;
}

/* Images de l'avatar (genre, type, cheveux, barbe, etc.) positionnées les unes sur les autres pour créer l'effet de superposition */
#affichage-avatar img {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}

/* Ordre de superposition des images de l'avatar (de la plus neutre à la plus personnalisée) */
#icone-neutre { z-index: 1; }
#icone-genre { z-index: 2; }
#icone-type { z-index: 3; }
#icone-cheveux-longueur { z-index: 4; } 
#icone-barbe { z-index: 5; }
#icone-barbe-longueur { z-index: 6; }

/* Conteneur du questionnaire d'estimation de prix du salon de coiffure et barbier */
#controle-avatar {
    flex: 1; 
    max-width: 500px; 
    background: rgb(245, 241, 238); 
    padding: 30px; 
    border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(73, 57, 44,0.2);
}

/* Titre : Mon Profil Capillaire et Pilo-facial */
#controle-avatar h2 {
    font-family: "Mea Culpa", cursive;
    font-weight: 100;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 20px;
}

/* Pour aligner icône avatar et bouton de réinitialisation */
#icone-reini {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    'aa'
    'bb'
    ;
    gap: 30px;
}

/* Conteneur de chaque question du questionnaire d'estimation de prix du salon de coiffure et barbier */
.choixq { 
    margin-bottom: 20px; 
}

/*  Titre de chaque selection */
.choixq label {
    font-weight: bold; 
    color: rgb(73, 57, 44); 
    display: block; 
    margin-bottom: 8px; 
}

/* Style des éléments de sélection (ex : genre, type, longueur des cheveux, barbe, etc.) du questionnaire d'estimation de prix du salon de coiffure et barbier */
.choixq ::selection { 
    width: 100%; 
    padding: 12px; 
    border-radius: 8px; 
    border: 1px solid rgb(245, 241, 238); 
}

/* Conteneur de l'affichage du prix estimé en fonction des choix du questionnaire */
#afficher-prix {
    background: rgb(73, 57, 44); 
    color: rgb(245, 241, 238); 
    padding: 20px; 
    border-radius: 12px; 
    text-align: center;
}

/* Bouton de réinitialisation du questionnaire (avatar + selection )*/
#btn-reinitialiser {
    margin-top: 20px;
    padding: 10px 20px;
    background: rgb(245, 241, 238);
    border: 1px solid rgb(73, 57, 44);
    color: rgb(73, 57, 44);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.3s;
    grid-area: bb;
}

/* Effet de couleur au survol du bouton de réinitialisation du questionnaire */
#btn-reinitialiser:hover {
    background: rgb(73, 57, 44);
    color: rgb(245, 241, 238);
}




/***BOUTON PHRASE DE FIN***/

/*Section présentant une phrase d'accroche et un bouton de prise de rendez-vous à la fin de la page du salon de coiffure, pour inciter les visiteurs à réserver leurs services.*/
#transfofemmecoiffeur {
    width: 100%;
    height: 85vh;
    background-image: 
        linear-gradient(rgba(73, 57, 44, 0.2), rgba(73, 57, 44, 0.6)),
        url("Images/Coiffeur/Transformation-femme.jpg");
    background-size: cover;
    background-position: center;
}

/* Bouton de prise de rendez-vous en fin de page */
#transfofemmecoiffeur > .btn-rdv { 
    margin-top: 500px;
    font-size: 50px;
    letter-spacing: 5px;
}

/**************** COIFFEUR FIN ***************/





















/**************************************** BARBIER *************************************************/

/**************** HEADER BARBIER **************/

/* Header image du salon de barbier */
#barbier-header {
    width: 100%;
    height: 60vh;
    background-image:
        linear-gradient(
        rgba(73, 57, 44,0.1),
        rgba(73, 57, 44,0.7)),
        url("Images/Barbier/Header Barbier.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



/*** Bouton RDV bas de page ***/

/*Section présentant une phrase d'accroche et un bouton de prise de rendez-vous à la fin de la page du barbier, pour inciter les visiteurs à réserver leurs services.*/
#transfohommebarbier {
    width: 100%;
    height: 85vh;
    background-image: 
        linear-gradient(rgba(73, 57, 44, 0.2), rgba(73, 57, 44, 0.6)),
        url("Images/Barbier/Transformation-Homme.jpg");
    background-size: cover;
    background-position: center;
}

/* Phrase d'accroche en fin de page du barbier */
#fin-rdv h2 {
    padding-top: 100px;
    font-family: "Mea Culpa", cursive;
    font-weight: 100;
    font-size: 7rem;
    color: rgb(245, 241, 238);
    text-shadow: 0 2px 10px rgba(73, 57, 44, 1);
}

/* Bouton de prise de rendez-vous en fin de page */
#transfohommebarbier > .btn-rdv { 
    margin-top: 500px;
    font-size: 50px;
    letter-spacing: 5px;
}

/**************** HEADER BARBIER FIN **************/






/**************** PRENDRE RDV ***************/

/* Section présentant un formulaire de prise de rendez-vous pour les services de coiffure et barbier, avec des champs pour le nom, l'email, la date et l'heure du rendez-vous, ainsi que les prestations choisies. */
#section-rdv {
	background-image: url("Images/Rendez-vous/Rendez-vous-fond-dore-500.jpg");
    background-size: cover;
    background-position: center;
    padding-top: 60px;
    padding-bottom: 120px;
}

/* Conteneur du formulaire de prise de rendez-vous du salon de coiffure et barbier */
#boite-rdv-cal {
    background-color: rgba(73, 57, 44, 0.9); 
    height: 1330px;
    width: 80vh;   
    margin: 0 auto 0 auto;
    padding: 48px 0;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(73, 57, 44, 0.3);
}


/****** Calendrier *******/

/* Section présentant un calendrier */
#entete-calendrier {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    margin-bottom: 48px;
    background-color: rgb(245, 241, 238);
}

/* Titre : Prendre rendez-vous */
#entete-calendrier h2{
    font-size: 6rem;
    margin: 20px 0;
}

/* Image d'entête du calendrier décorative */
.entetegd {
    width: 15%;      
    height: auto;    
    object-fit: contain;  
}

/* Conteneur du calendrier du formulaire de prise de rendez-vous du salon de coiffure et barbier */
#boite-calendrier {
    background-color: rgb(245, 241, 238);
    height: 680px;
    width: min(100%, 800px);
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(73, 57, 44, 0.3);
    margin: 50px auto 0 auto;
    padding: 50px;
    color: rgb(73, 57, 44);
    line-height: 2.5rem;
}

/* Conteneur de l'entête du calendrier (titre + boutons de navigation) */
#calendrier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 70px;
}

/* Titre du calendrier : Avril 2026 */
#calendrier-header h3 {
    margin: 10px;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Boutons de navigation du calendrier (flèches pour changer de mois) */
.fleche-btn {
    background: rgb(245, 241, 238);
    border: none;
    color: rgb(73, 57, 44);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

/* Effet de couleur au survol des boutons de navigation du calendrier */
.fleche-btn:hover {
    background: rgb(199, 183, 168);
}

/* Conteneur de la grille du calendrier (jours de la semaine + jours du mois) */
#grille-calendrier {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    text-align: center;
    font-size: 1.2rem;
}

/* Noms des jours de la semaine dans la grille du calendrier */
.nom-jour {
    font-weight: bold;
    font-size: 1.3rem;
    color: rgb(212, 163, 115);
    margin-bottom: 35px; 
}

/* Jours du mois dans la grille du calendrier où le salon est ouvert */
.jour {
    padding: 10px 0;
    cursor: pointer;
    border-radius: 10px;
    transition: 0.2s;
}

/* Effet de couleur au survol des jours du mois dans la grille du calendrier où le salon est ouvert */
.jour:hover {
    background-color: rgb(87, 58, 35);
    color: rgb(245, 241, 238);
}

/* Jours du mois dans la grille du calendrier où le salon est fermé */
.jour-off {
    padding: 10px 0;
    color: rgb(199, 199, 199);
}





/* Prestation */

/* Conteneur de la sélection de la prestation et du coiffeur/barbier dans le formulaire */
#selection-prestation, #selection-coiffeur {
    color: rgb(245, 241, 238);
    margin: 60px auto;
    width: fit-content;

    text-align: center;
}

/* Titre de la sélection de la prestation et du coiffeur/barbier dans le formulaire */
#selection-prestation h3, #selection-coiffeur h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

/* Titre de la sélection de la prestation pour faire une marge avec le calendrier */
#selection-prestation h3 {
    margin-top: 80px;
}

/* Conteneur des éléments de sélection de la prestation et du coiffeur/barbier dans le formulaire */
#choix-prestation, #choix-expert {
    width: fit-content;
    margin: 0 auto;
    display: block;
    font-size: 1.1rem;
}


/* Bouton confirmation */

/* Bouton de validation du formulaire de prise de rendez-vous du salon de coiffure et barbier */
#bouton-valider-principal {
    display: block;
    width: fit-content; 
    padding: 12px 30px;
    margin: 90px auto; 
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgb(245, 241, 238);
    background: linear-gradient(135deg, rgb(199, 183, 168) 0%, rgb(185, 148, 110) 50%, rgb(73, 57, 44) 100%) !important; /* Force le dégradé */
    border-radius: 2em;
    box-shadow: 0 8px 20px rgba(73,57,44,0.8);
    overflow: hidden;
    cursor: pointer;
    transition: 0.35s ease !important;
}

/* Effet de surbrillance avec un dégradé qui traverse le bouton de validation du formulaire de prise de rendez-vous du salon de coiffure et barbier */
#bouton-valider-principal::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -120%;
    width: 60%;
    height: 140%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(245, 241, 238,0.35),
        transparent
    );
    transform: rotate(12deg);
    transition: left 0.8s ease;
}

/* Effet au survol du bouton de validation du formulaire de prise de rendez-vous du salon de coiffure et barbier : léger soulèvement, agrandissement, espacement des lettres et apparition du dégradé de surbrillance */
#bouton-valider-principal:hover {
    transform: translateY(-4px) scale(1.05);
    letter-spacing: 2px;
    box-shadow:
        0 15px 30px rgba(73,57,44,0.3),
        0 0 20px rgba(212,163,115,0.2);
}

/* Fait traverser le reflet de gauche à droite au survol du bouton de validation du formulaire de prise de rendez-vous du salon de coiffure et barbier */
#bouton-valider-principal:hover::before {
    left: 140%; /* Fait traverser le reflet de gauche à droite */
}

/* Effet au clic du bouton de validation du formulaire de prise de rendez-vous du salon de coiffure et barbier : léger déplacement vers le haut et réduction de la taille pour simuler un effet de pression */
#bouton-valider-principal:active {
    transform: translateY(-1px) scale(0.98);
}




/*Boite de contact*/
#contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    padding: 80px 10%;
    background-color: rgb(245, 241, 238);
    align-items: center;
}

/*TITRE : Contactez-nous*/
#contact h2 {
    grid-column: 1 / -1; /* Le titre prend toute la largeur */
    margin-bottom: 15px;
    font-size: 6rem;
}

/* Conteneur du texte de contact */
#texte-contact {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Style pour chaque ligne icône + texte */
.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgb(245, 241, 238);
    padding: 15px 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(73, 57, 44, 0.2);

}

/* Style des icônes de contact (adresse, téléphone, email) */
.contact-item i {
    color: rgb(212, 163, 115); 
    font-size: 1.2rem;
    width: 25px;
    text-align: center;
}

/* Style du texte de contact (adresse, téléphone, email) */
.contact-item p {
    margin: 0;
    color: rgb(73, 57, 44);
    font-size: 1rem;
}

/* Style de l'image de localisation du salon */
#image-localisation img {
    width: 50%;
    height: auto;
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(73, 57, 44, 0.2);

}








    
/**************** PRENDRE RDV FIN ***************/























/**************** FORMULAIRE ***************/

/* Fond du formulaire */
#formulaire-fond {
    width: 100%;
    height: 100vh;
    background-image: url("Images/Formulaire/Formulaire-fond-marron-500.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Conteneur du formulaire de connexion, d'inscription et de récupération du mot de passe du salon de coiffure et barbier */
#formulaire, #formulaire-inscription, #formulaire-recuperation {
    width: 600px;
    background: rgba(245, 241, 238, 0.7); 
    border-radius: 20px;
    padding: 40px 60px;
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 35px rgba(74, 63, 53, 1);
    border: 1px solid rgba(73, 57, 44, 0.5);
}

/* Cache le formulaire d'inscription */
#formulaire-inscription {
    display: none;
}

/* Cache le formulaire de récupération du mot de passe */
#formulaire-recuperation {
    display: none;
}

/* Titre h2 : Bienvenue */
h2 {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 40px;
    font-family: "Mea Culpa", cursive;
    font-weight: 100; 
    font-size: 70px;
    color: rgb(73, 57, 44);
}

/* Conteneur de chaque champ du formulaire (nom, email, mot de passe, etc.) */
.formulaire-texte {
    position: relative;
    margin: 16px 0;
}

/* Style des champs de saisie du formulaire (input) */
.formulaire-texte input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(245, 241, 238, 0.9);
    border: 1px solid rgb(199, 183, 168);
    border-radius: 10px;
    outline: none;
    color:  rgb(73, 57, 44);
    font-size: 15px;
    transition: 0.3s;
}

/* Effet de surbrillance au focus des champs de saisie du formulaire (input) */
.formulaire-texte input:focus {
    border-color:  rgb(73, 57, 44);
    box-shadow: 0 0 10px rgba(199, 183, 168, 0.2);
}

/* Style des labels des champs du formulaire, positionnés au-dessus des champs de saisie (input) et animés pour se déplacer vers le haut et réduire leur taille au focus ou lorsque le champ est rempli */
.formulaire-texte label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: rgb(212,163,115);
    pointer-events: none;
    transition: 0.3s;
}

/* Animation des labels des champs du formulaire au focus ou lorsque le champ est rempli : déplacement vers le haut, réduction de la taille et changement de couleur */
.formulaire-texte input:focus~label, 
.formulaire-texte input:valid~label { 
    top: 0;
    font-size: 12px;
    background: rgb(245, 241, 238); /* Pour couper la ligne de la bordure */
    color: rgb(73, 57, 44);
    font-weight: 600;
}

/* Style du bouton de validation du formulaire de connexion, d'inscription et de récupération du mot de passe du salon de coiffure et barbier */
.btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, rgb(212,163,115), rgb(73, 57, 44));
    color: rgb(245, 241, 238);
    font-weight: 600;
    font-size: 16px;
    margin-top: 10px;
    transition: 0.4s;
    box-shadow: 0 5px 15px rgba(73, 57, 44, 0.3);
}
    
/* Effet au survol du bouton de validation du formulaire de connexion, d'inscription et de récupération du mot de passe du salon de coiffure et barbier : léger soulèvement, augmentation de la luminosité et renforcement de l'ombre portée */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(73, 57, 44, 0.4);
    filter: brightness(1.1);
}

/* Style du texte d'inversion entre les formulaires de connexion, d'inscription */
.intervertir-texte-IC {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: rgb(73, 57, 44);
}

/* Style du lien d'inversion entre les formulaires de connexion, d'inscription */
.intervertir-texte-IC a {
    color: rgb(73, 57, 44);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

/* Mise en forme des labels email/mdp*/
.formulaire-texte label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: rgb(212,163,115);
    pointer-events: none;
    transition: all 0.3s ease;
    background: transparent;
    padding: 0 5px;
}

/* Animation des labels des champs du formulaire au focus ou lorsque le champ est rempli : déplacement vers le haut, réduction de la taille et changement de couleur */
.formulaire-texte input:focus ~ label,
.formulaire-texte input:valid ~ label {
    top: 0;
    font-size: 12px;
    color: rgb(73, 57, 44);
    background: rgba(245, 241, 238,1); 
    font-weight: bold;
}

/* Style du lien de récupération du mot de passe  */
#lien-recup {
    display: block;
    text-align: right;
    font-size: 12px;
    color: rgb(73, 57, 44);
    text-decoration: none;
    transition: 0.3s;
}

/* Cacher ou voir le mot de passe */
.voir-mdp {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%); 
    cursor: pointer;
    color: rgb(212,163,115);
    font-size: 18px;
    transition: 0.3s;
    z-index: 10;
}

/* Effet de couleur au survol du lien de récupération du mot de passe */
.voir-mdp:hover {
    color: rgb(73, 57, 44);
}

/* On ajuste un peu le padding de l'input pour que le texte ne passe pas sous l'œil */
.formulaire-texte input {
    padding-right: 45px !important;
}

/* Style pour le texte d'explication de la récup */
#formulaire-recuperation p {
    font-size: 14px;
    color: #5d4037;
    margin-bottom: 25px;
    line-height: 1.4;
}

/**************** FORMULAIRE FIN ***************/










/**************** COOKIES ***************/

/* Section présentant une boîte d'information sur les cookies utilisée pour informer les visiteurs du site de coiffure et barbier de l'utilisation des cookies, avec des options pour accepter ou refuser les cookies. */
#cookie-boite {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: rgba(226, 214, 203, 0.9);
    max-width: 300px;
    border-radius: 15px;
    text-align: center;
    padding: 25px 25px 30px 25px;
    color: rgb(73, 57, 44);
    box-shadow: 0 10px 25px rgba(73, 57, 44, 0.5);
    z-index: 1000;
}

/* Conteneur de la boîte d'information sur les cookies cacher quand les cookies sont acceptés */
#cookie-boite.cache {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Image des cookies */
#cookie-contenu img {
    max-width: 90px;
}

/* Margin entre cookie boite et contenu */
#cookie-boite #cookie-contenu {
    margin-top: 10px;
}

/* Titre : Ce site utilise des cookies */
#cookie-contenu h5 {
    font-size: 16px;
    font-weight: 600;
    margin: 10px;
}

/* Texte : Nous les utilisons pour assurer le bon fonctionnement du site et améliorer votre expérience. */
#cookie-contenu p {
    color: rgb(73, 57, 44);
    margin: 5px 0 1px 0;
    font-size: 13px;
    line-height: 1.1;
}

/* En savoir plus sur les cookies */
#cookie-contenu a {
    cursor: pointer;
    color: rgb(73, 57, 44);
    font-size: 11px;
    text-decoration: underline;
}

/* Conteneur des boutons d'acceptation et de refus des cookies */
#cookie-boite #bouton-cookie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

/* Style du bouton d'acceptation des cookies */
#bouton-cookie #accepterc {
    padding: 10px 20px;
    background: rgb(212,163,115);
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 500;
    color: rgb(245, 241, 238);
    border-radius: 5px;
}

/* Style du bouton de refus des cookies */
#bouton-cookie #refuserc {
    padding: 10px 20px;
    background: rgb(245, 241, 238);
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 500;
    color: rgb(73, 57, 44);
    border-radius: 5px;
}

/* Effet de couleur au survol du bouton d'acceptation des cookies */
#bouton-cookie #accepterc:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

/* Effet de couleur au survol du bouton de refus des cookies */
#bouton-cookie #refuserc:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

/**************** COOKIES FIN ***************/



/**************** BARRE DE SCROLL ***************/

/* Couleur et épaisseur de la barre de scroll */
html {
    scrollbar-width: thin;
    scrollbar-color: rgb(212,163,115) rgb(245, 241, 238);
}

/* Largeur de la barre de scroll */
::-webkit-scrollbar {
    width: 10px; 
}

/**************** BARRE DE SCROLL FIN ***************/




















































/* Format telephone */

/* Adaptation du design pour les écrans de moins de 1055px de large (téléphones, tablettes, etc.) */
@media (max-width : 1055px) {

    /* Empêche le débordement horizontal sur les petits écrans */
    html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/******************** MENU BURGER *******************/

/* Cache le logo Bloom dans le menu burger */
#bloom {
    display: none;
}

#nav-droite {
    display: flex;
    flex-direction: row-reverse;
    gap: 16%;
    width: 100%;
}

/* Style des barres du menu burger */
.barre {
    display: block;
    width: 30px;
    height: 5px;
    margin: 5px 0;
    background-color: rgb(245, 241, 238);
    transition: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6), opacity 0.4s ease;
    border-radius: 5px;
    border: 1px solid rgba(73, 57, 44, 0.9);
}

/* Effet de glitch sur les barres du menu burger au survol : apparition d'un reflet blanc incliné qui traverse les barres */
.barre::after {
    content: '';
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Couleur de l'effet */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    transform: skewX(-20deg); /* Inclinaison pour le glitch */
}    

/* Style du bouton de toggle du menu burger */
#nav-toggle {
    display: block;
    z-index: 10001;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Enlever l'ombre portée lorsque le menu est actif */
#nav-toggle.active {
    box-shadow: none !important;
}

/* Style du menu burger */
#navbarre-menu {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre verticalement */
    align-items: center;     /* Centre horizontalement */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(73, 57, 44, 0.98); /* Plus opaque pour la lisibilité */
    backdrop-filter: blur(10px);
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    padding: 0;
    margin: 0;
}

/* Style des éléments de menu burger (liens) */
#navbarre-menu.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

/* Animation des éléments de menu burger */
#navbarre-menu li {
    transform: translateY(20px);
    transition: all 0.4s ease;
    opacity: 0;

    z-index: 10001;
}

/* Effet d'activation des éléments de liens */
#navbarre-menu.active li {
    transform: translateY(0);
    opacity: 1;
}

/* Staggering de l'animation des éléments de liens du menu burger : chaque lien apparaît avec un délai pour créer un effet de cascade */
#navbarre-menu.active li:nth-child(1) { 
    transition-delay: 0.1s; 
}
#navbarre-menu.active li:nth-child(2) { 
    transition-delay: 0.2s; 
}
#navbarre-menu.active li:nth-child(3) {
    transition-delay: 0.3s; 
}
#navbarre-menu.active li:nth-child(4) {
    transition-delay: 0.4s; 
}
#navbarre-menu.active li:nth-child(5) {
    transition-delay: 0.5s; 
}

/* Style des liens du menu burger */
#navbarre-menu li a {
    color: rgb(245, 241, 238);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    transition: 0.3s;
}

/* Effet d'activation du menu burger */
#navbarre-menu.active {
    opacity: 1;
    visibility: visible;
}


/* La barre du haut descend, grossit un peu et tourne */
#nav-toggle.active .barre:nth-child(1) {
    transform: translateY(10px) rotate(45deg) scale(1.1);
}

/* La barre du milieu disparaît en fondu et se réduit */
#nav-toggle.active .barre:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

/* La barre du bas monte, grossit un peu et tourne à l'inverse */
#nav-toggle.active .barre:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg) scale(1.1);
} 
/******************** MENU BURGER FIN *******************/






/******************** ICONE CONNEXION *******************/

/* Cache le texte de connexion dans l'icône de connexion du menu sur les petits écrans */
.texte-connexion {
    display: none;
}
/******************** ICONE CONNEXION FIN *******************/





/******************** ETOILE NEWSLETTER *******************/
/* Cache le conteneur de l'étoile de la section newsletter sur les petits écrans */
#nav-gauche {
    display: none;
}
/******************** ETOILE NEWSLETTERFIN *******************/









/******************** ACCUEIL *******************/

.btn-rdv {
    font-size: 1rem;
}

/*Header*/
/* Image d'entête du salon de coiffure */
#headerfemme {
    background-position: -200px;
}

/* Image d'entête du salon de barbier */
#headerhomme {
    background-position: 500px;
}

/* Titre de l'entête du salon de coiffure et barbier */
.headertexte h1 {
    font-size: 6rem;
    margin-top: 150px;
}

/* Texte de l'entête du salon de coiffure et barbier */
.headertexte p {
    font-size: 1.5rem;
}


/*Presentation*/
/* Section présentant une image et un texte de présentation du salon de coiffure et barbier */
.presentation {
    padding: 60px 20px;
}

/* Titre de la section de présentation du salon de coiffure et barbier */
.presentation h1 {
    font-size: 3.5rem !important;
}

/* Conteneur de l'image et du texte de présentation du salon de coiffure et barbier, alignés verticalement et centrés */
.presentationimgtexte {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

/* Image de présentation du salon de coiffure et barbier, centrée et prenant toute la largeur disponible */
.presentation img {
    width: 100%; 
    margin-bottom: 20px;
}

/* Texte de présentation du salon de coiffure et barbier, centré et avec une taille de police adaptée pour les petits écrans */
.textepresentation h3 {
    text-align: center;
    font-size: 1.4rem;
}



/*Prestation*/
/* Taille du titre de la section de prestations */
#hprestations h2 {
    font-size: 3rem;
    margin-bottom: 40px;
}




/*Avant Après*/ 
/* On enlève le padding */
#avant-apres-section {
    padding: 0;
}

/* Titre : Transformations */
#avant-apres-section h2 {
    font-size: 3rem;
    margin-bottom: 40px;
}

/* Espace entre la dernière image et la partie avis */
#avant-apres-contenu {
    margin-bottom: 50px;
}






/*FAQ*/

 /* Titre de la section FAQ */
#faq h2 {
    font-size: 3rem;
    margin-bottom: 40px;
}

/* Conteneur de chaque question de la section FAQ*/
.faq-question {
    flex-wrap: nowrap;   
    gap: 10px; 
}

/* Titre de chaque question de la section FAQ */
.faq-titre {
    font-size: 1.1rem;
}

/* Réponse de chaque question de la section FAQ */
.faq-reponse {
    font-size: 0.9rem;
}


/* Image fin accueil*/
#transfoaccueil h2 {
    font-size: 4rem;
}




/* --- FOOTER --- */
/* Conteneur des informations du footer, aligné verticalement et centré */
#footerinfo {
    flex-direction: column;
    gap: 30px;
    text-align: center;
}

/* Conteneur de la partie gauche du footer, aligné verticalement et centré */
#footer-left ul {
    flex-direction: column;
    align-items: center;
}

/* Conteneur de la partie droite du footer, aligné verticalement et centré */
#footer-right {
    justify-content: center;
}


/*Avis*/
/* Titre de la section d'avis clients */
#avis-section h2 {
    font-size: 3rem;
}




/* Bouton rdv fin de page */
#transfoaccueil > .btn-rdv {
    font-size: 1rem;
    margin-top: 250px;
}



/******************** ACCUEIL FIN*******************/






/******************** COIFFEUR*******************/

/*Header*/

/* Image d'entête du salon de coiffure */
#coiffeur-header {
    max-height: 510px;
}

#headertexteC {
    padding-top: 100px;
}

/* Titre de l'entête du salon de coiffure */
#headertexteC h1 {
    font-size: 6rem;

}

/* Texte de l'entête du salon de coiffure */
#headertexteC p {
    font-size: 0.9rem;
    margin-bottom: 40px;
}

/* Bouton de prise de rendez-vous dans l'entête du salon de coiffure */
#headertexteC > .btn-rdv {
    font-size: 1rem;
    margin-top: 0;
}

/*Equipe Coiffure*/
/* Titre de la section de présentation de l'équipe du salon de coiffure */
#equipe h2 {
    font-size: 3rem;
}


/*Prestation Coiffure*/
/* Titre de la section de présentation des prestations */
#prestations-coiffure-barbier h2 {
    font-size: 3rem;
}



/*Questionnaire estimation*/

#image-fond-questionnaire {
}

/* Titre de la section de questionnaire : Mon Profil Capillaire et Pilo-facial */
#controle-avatar h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
}

/* Taille texte : estimation de prestation */
#afficher-prix {
    font-size: 0.9rem;
    margin-top: 25px;
}

/* Taille du texte : Estimation à titre indicatif */
#avatar-configuration p {
    font-size: 0.9rem;
}

/* Espace entre les choix de prestation */
.choixq {
    margin: 10px 0 0 auto;
}




/* Image fin */
/* Change taille image avec un maximum */
#transfofemmecoiffeur {
    max-height: 590px;
}

/* Titre de l'image fin : Prêt pour votre transformation ? */
#transfofemmecoiffeur h2 {
    font-size: 4rem;
    padding-top: 40px;
}

/* Bouton de prise de rendez-vous en fin de page */
#transfofemmecoiffeur > .btn-rdv {
    font-size: 1rem;
    margin-top: 250px;
}


/******************** COIFFEUR FIN*******************/







/******************** BARBIER*******************/

/*Image Header*/
/* Replace image d'entête du salon de barbier */
#barbier-header {
    background-position: -200px;
}

/* Image fin */
/* Change taille image avec un maximum */
#transfohommebarbier {
    max-height: 590px;
}

/* Titre de l'image fin : Prêt pour votre transformation ? */
#transfohommebarbier h2 {
    font-size: 4rem;
    padding-top: 70px;
}

/* Bouton de prise de rendez-vous en fin de page */
#transfohommebarbier > .btn-rdv {
    font-size: 1rem;
    margin-top: 200px;
}

/******************** BARBIER FIN*******************/




/******************** PRENDRE RDV*******************/

/*  Padding de la section de prise de rendez-vous du salon de coiffure et barbier */
#section-rdv {
    padding-bottom: 50px;
    padding-top: 12px;
}

/* Replace l'entete*/
#rdv-cal {
    padding-top: 30px;
    margin: 0;
}

/* L'entete en block*/
#entete-calendrier {
    display: block;
}

/* Titre de l'entête du calendrier : Prendre rendez-vous */
#entete-calendrier h2 {
    font-size: 3.5rem;
}

/* Cache les images d'entête du calendrier pour les petits écrans */
#entete-calendrier > .entetegd {
    display: none;
}

/*Replace le block marron*/
#boite-rdv-cal {
    padding-top: 15px;
    padding-bottom: 25px;
    width: 100%;
    border-radius: 0;
    height: auto;
}


/* Replace le conteneur du calendrier pour qu'il prenne toute la largeur et que les éléments soient mieux espacés */
#boite-calendrier {
    width: 100%;
    height: fit-content;
    margin-top: 0;
    padding: 2em;
    box-shadow: 0 10px 25px rgba(73, 57, 44, 0.8);
}

#calendrier-header {
    margin-bottom: 1em;
}

 /* Modifie la taille Avril */
#calendrier-header h3 {
    font-size: 1.6rem;
}

/* Modifie espacement des jours */
#grille-calendrier {
    gap: 10px;
}

/* Modifie la taille des jours de la semaine dans la grille du calendrier pour les petits écrans */
.nom-jour {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

/* Modifie la taille des jours */
.jour, .jour-off {
    font-size: 0.9rem;
}



/* Modifie la taille du titre de la sélection de la prestation */
#selection-prestation h3 {
    font-size: 1.2rem;
    margin-left: 19px;
    text-shadow: 0 8px 20px rgba(73, 57, 44, 0.3);
}

/* Modifie la taille du titre de la sélection du coiffeur/barbier */
#selection-coiffeur h3 {
    font-size: 1.2rem;
    text-shadow: 0 8px 20px rgba(73, 57, 44, 0.5);
}


/* Modifie la taille du texte des choix de prestation */
#choix-prestation {
    font-size: 0.8rem;
    margin-left: 22%;
}

/* Modifie la taille du texte des choix de coiffeur/barbier */
#choix-expert {
    font-size: 0.8rem;
    margin-left: 22%;
}


/* Modifie la taille du texte du bouton de validation */
#bouton-valider-principal {
    font-size: 1rem;
    margin: 0 auto;
    font-family: "Poppins", sans-serif;
}


/* Modifie la disposition du conteneur de contact */
#contact {
    grid-template-columns: 1fr;
    gap: 15px;
    padding-top: 30px;
    padding-bottom: 45px;
}

/* Modifie la taille du titre de la section de contact */
#contact h2 {
    font-size: 3.5rem;
}

/* Enleve l'image de localisation */
#image-localisation {
    display: none;
}

/******************** PRENDRE RDV FIN*******************/

}